JS实现星星评分功能实例代码(两种方法)

2023-08-18 22:59| 来源: 网络整理| 查看: 265

一、方法1

1、用到图片

2、结构和样式

Document ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-style: none; width: 27px; height: 27px; background: url(img/star.gif) } ul li a { display: block; width: 100%; padding-top: 27px; overflow: hidden; } ul li.light { background-position: 0 -29px; } 1 2 3 4 5

li加了light的class就会变成亮星，就是换了背景位置，把空心的星星变成了实心的。所以js实现的时候点亮就是给li加一个light的类名。

效果：

3、交互js

var num=finalnum = tempnum= 0; var lis = document.getElementsByTagName("li"); //num:传入点亮星星的个数 //finalnum:最终点亮星星的个数 //tempnum:一个中间值 function fnShow(num) { finalnum= num || tempnum;//如果传入的num为0，则finalnum取tempnum的值 for (var i = 0; i < lis.length; i++) { lis[i].className = i < finalnum? "light" : "";//点亮星星就是加class为light的样式 } } for (var i = 1; i

【本文地址】

公司简介

联系我们